<template>
  <div class="vip">
      <div :style="{'background-image': 'url('+background_image+')'}" class="vip-top"  v-bind:class="{ vip_login: login }">
          <!-- <div class="imag-wrap">
            <img class="vip-img" :src="thumb">
          </div> -->
          <img class="vip-person" :src="pic">
          <!-- <van-button @click="toPay" class="vip-btn vip-btn-recharge" type="primary">{{login?'充值':'开通王牌'}}</van-button> -->
          <!-- <van-button @click="toWithdraw" class="vip-btn vip-btn-withdraw" type="danger">提现</van-button> -->
      </div>
      <!-- 特权说明 -->
      <!-- <div class="vip-tips">
          <vip-tip v-for="(item, index) in vipTips" :key="index"
          :thumb="item.thumb" :name="item.name" :desc="item.desc">
          </vip-tip>
      </div> -->
      <!-- 个人工具 -->
      <div class="person-tips">
          <person-tip v-for="(item, index) in personTips" :key="index" :url="item.url"
          :thumb="item.thumb" :name="item.name" :desc="item.desc" :info="item.info">
          </person-tip>
      </div>
  </div>
</template>
<script>
import vipTip from '../../components/base/vip-tip.vue'
import personTip from '../../components/base/person-tip.vue'
export default {
  name: 'vip',
  comments: 'vip',
  components: {
    'vip-tip': vipTip,
    'person-tip': personTip
  },
  props: {
    login: localStorage.user,
    tipId: String,
    thumb: {
      type: String,
      default: './static/images/vip.jpg'
    },
    pic: {
      type: String,
      default: JSON.parse(localStorage.user || '{}').headimgurl || './static/images/头像1.jpg'
    },
    name: String,
    desc: String
  },
  data () {
    return {
      user: {},
      background_image: './static/images/Wechat.jpeg', // JSON.parse(localStorage.user || '{}').headimgurl,
      personTips: [
        // { thumb: './static/images/订单1.png', name: '我的预约', desc: '我的预约', url: '/vip/appointment', info: 0 },
        { thumb: './static/images/订单1.png', name: '我的订单', desc: '我的订单我的订单我的订单', url: '/vip/orders', info: 0 },
        { thumb: './static/images/优惠券.png', name: '优惠券', desc: '充值记录充值记录充值记录', url: '/vip/coupons', info: 0 },
        { thumb: './static/images/充值1.png', name: '消费记录', desc: '充值记录充值记录充值记录', url: '/vip/payment', info: 0 },
        { thumb: './static/images/退回1.png', name: '退款申请', desc: '退款申请', url: '/vip/refund', info: 0 },
        { thumb: './static/images/消息1.png', name: '消息', desc: '消息通知', url: '/vip/message', info: 0 }
      ]
    }
  },
  created () {
    document.title = '会员中心'
    var that = this
    this.$axios.get('/users/' + JSON.parse(localStorage.getItem('user')).id + '/messages/count').then(response => {
      if (response.data) {
        if (response.data.all > 0) {
          that.personTips[0].info = response.data.bill
          that.personTips[2].info = response.data.recharge
          that.personTips[3].info = response.data.refound
          that.personTips[4].info = response.data.all
        }
      }
    })
  },
  methods: {
    // 充值-开通vip
    toPay: function () {
      this.$router.push({
        name: 'pay',
        params: {
        }
      })
    },
    // 提现
    toWithdraw: function () {
      this.$router.push({
        name: 'withdraw',
        params: {
        }
      })
    }
  }
}
</script>
<style lang="postcss" scoped>
.vip-top{
    height: 200px;
    width: 100%;
    //background-image: url('http://img1.imgtn.bdimg.com/it/u=2734040114,2677221375&fm=27&gp=0.jpg');
    background-size:100% 100%;
    position: relative;
}
.vip_login{
  filter: sepia(100%);
}
.imag-wrap{
    height: 86%;
    width: 86%;
    position: absolute;
    border-radius: 9px;
    left: 7%;
    top: 7%;
    margin: 0px auto;
    overflow: hidden;
}
.vip-img{
    height: auto;
    width: 100%;
}
.vip-btn{
    position: absolute;
    bottom: 12%;
    background-color: transparent;
    color: #f8f8f8;
    height: 32px;
    border-radius: 8px;
    line-height: 24px;
}
.vip-btn-recharge{
    right: 12%;
}
.vip-btn-withdraw{
    right: 35%;
}
.vip-person{
    position: absolute;
    right: 3%;
    top: 2%;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 1px solid yellow;
}
.vip-tips,.person-tips{
    padding: 4px 5px 4px 5px;
}
.person-tips div:last-child,.vip-tips div:last-child{
    border-radius: 0px 0px 12px 12px;
}
.vip-tips div:first-child,.person-tips div:first-child{
    border-radius: 12px 12px 0px 0px;
}
.vip-tips div:last-child,.person-tips div:last-child{
    border-bottom: none;
}
</style>
